<template>
	<div class="employ_conter">
		<div>
		</div>

		<div class="Statistics_item1">
			<div class="Statistics_item2">
				<!--        <h3 style="color: #666666;margin-top: 10px;text-align: center">统计总人数</h3>-->
				<div class="Statistics_item2_top">
					<div style="display: flex;">
						<el-button type="primary" @click="getMonth">月份</el-button>
						<el-button type="primary" @click="getquarters">季度</el-button>
					</div>
					<el-form style="margin:30px 0;display: flex;flex-wrap: wrap; height: 100px;" ref="queryParams" :model="queryParams"
						label-width="100px">
						<el-form-item label="年份">
							<el-date-picker v-model="queryParams.year" type="year" placeholder="选择年"
								value-format="yyyy">
							</el-date-picker>
						</el-form-item>
						<el-form-item v-if="show" label="月份">
							<el-select v-model="queryParams.months" multiple placeholder="请选择月份">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-else label="季度">
							<el-select v-model="queryParams.quarters" multiple placeholder="请选择季度">
								<el-option v-for="item in options1" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="被保险人" label-width="100px">
							<el-select v-model="queryParams.sys_id" placeholder="请选择被保险人">
								<el-option v-for="item in insured" :key="item.user_id" :label="item.user_name"
									:value="item.user_id">
								</el-option>
							</el-select>
						</el-form-item>

						<div class="btn">
							<el-button type="primary" size="mini" @click="getSearch">搜索</el-button>
							<el-button class="" type="info" size="mini" @click="resetForm">重置</el-button>
						</div>
					</el-form>
					<div class="peopleNumber">
						<div class="peopleNumber2" @click="getamount1">
							<div class="title">总人数</div>
							<div class="price">
								<span>{{
                  userCount?userCount:0
                }}</span> <span class="name"> 人</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img1+')'}" @click="getemployees">
							<div class="title">当月新增人数</div>
							<!--              <img src="../../../assets/images/statistics_bg1.png" height="282" width="678"/>-->
							<div class="price">
								<span>{{
                    addUser?addUser:0
                  }}</span> <span class="name"> 人</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img2+')'}" @click="getamount2">
							<div class="title">出单人数</div>
							<div class="price">
								<span>{{ orderUserCount?orderUserCount:0 }}</span>
								<span class="name"> 人</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img3+')'}" @click="getamount3">
							<div class="title">批单人数</div>
							<div class="price">
								<span>{{ approveUserCount?approveUserCount:0 }}</span>
								<span class="name"> 人</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img4+')'}" @click="getamount4">
							<div class="title">4类工种人数</div>
							<div class="price">
								<span>{{
                    userCount4?userCount4:0
                  }}</span>
								<span class="name"> 人</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img4+')'}" @click="getamount5">
							<div class="title">4类以上工种人数</div>
							<div class="price">
								<span>{{
                    userCount5
                  }}</span>
								<span class="name"> 人</span>
							</div>
						</div>

						<div class="peopleNumber2" :style="{backgroundImage:'url('+img5+')'}" @click="getEmployer">
							<div class="title">实际用工单位</div>
							<div class="price">

								<span>{{ companysCount?companysCount:0 }}</span>
								<span class="name"> 人</span>
							</div>
						</div>

					</div>
				</div>
				<div class="Statistics_item2_conter">
					<div class="title">统计图表</div>
					<div class="Statistics_item2_conter_item">
						<div ref="main2" class="main"
							style="height:451px;width: 751px;background: #FFFFFF;border-radius: 10px;margin-right: 10px">
						</div>
						<!--          width: 700px; -->
						<div v-if="show" ref="main"
							style="height:451px;width: 751px;background: #FFFFFF;border-radius: 10px;padding:20px 0;box-sizing: border-box">
						</div>
						<!--          width: 600px;-->
						<div v-else ref="main1"
							style="height:451px;width: 751px;background: #FFFFFF;border-radius: 10px;padding:20px 0;box-sizing: border-box">
						</div>
					</div>
				</div>

			</div>

		</div>
		<!--    查看实际用单位-->
		<el-dialog title="实际用工单位" :visible.sync="dialogVisible" width="80%">
			<div style="height: 600px;overflow: auto">
				<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
					<el-form-item label="实际用工单位" prop="type">
						<el-input v-model="queryParams.company" placeholder="请输入实际用工单位" clearable size="small"
							@keyup.enter.native="drawChart" />
					</el-form-item>

					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="getSearch">搜索</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
				<el-table v-loading="loading1" :data="company" style="width: 100%;">
					<el-table-column prop="name" label="实际用工单位" align="center" width="250">

					</el-table-column>
					<el-table-column prop="approvefalse" align="center" label="出单人数(人)" width="180">
						<template slot-scope="scope">
							<span>{{ scope.row.approvefalse ? scope.row.approvefalse + '人' : scope.row.approvefalse }}</span>
							<!--            <el-button-->
							<!--                size="mini"-->
							<!--                type="text"-->
							<!--                @click="getIssue(scope.row)"-->
							<!--            > {{ scope.row.approvefalse ? scope.row.approvefalse + '人' : scope.row.approvefalse }}-->
							<!--            </el-button>-->

						</template>
					</el-table-column>
					<el-table-column align="center" prop="approvetrue" label="批单人数(人)">
						<template slot-scope="scope">
							<span>{{ scope.row.approvetrue ? scope.row.approvetrue + '人' : scope.row.approvetrue }}</span>
							<!--            <el-button-->
							<!--                size="mini"-->
							<!--                type="text"-->
							<!--                @click="getIssue(scope.row)"-->
							<!--            > {{ scope.row.approvetrue ? scope.row.approvetrue + '人' : scope.row.approvetrue }}-->
							<!--            </el-button>-->

						</template>
					</el-table-column>
					<el-table-column prop="userCount4" align="center" label="4类人数(人)">
						<template slot-scope="scope">
							<span>{{ scope.row.userCount4 ? scope.row.userCount4 + '人' : scope.row.userCount4 }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="userCount4" align="center" label="4类以上人数(人)">
						<template slot-scope="scope">
							<span>{{ scope.row.userCount5 ? scope.row.userCount5 + '人' : scope.row.userCount5 }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="userCount" align="center" label="总人数(人)">
						<template slot-scope="scope">
							<span>{{ scope.row.userCount ? scope.row.userCount + '人' : scope.row.userCount }}</span>
							<!--            <el-button-->
							<!--                size="mini"-->
							<!--                type="text"-->
							<!--                @click="getIssue(scope.row)"-->
							<!--            > {{ scope.row.userCount ? scope.row.userCount + '人' : scope.row.userCount }}-->
							<!--            </el-button>-->

						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="drawChart" />
			</div>
		</el-dialog>
		<!--   查看当月新增人数-->
		<el-dialog title="当月新增人数" :visible.sync="dialogVisible1" width="80%">
			<div style="height: 600px;overflow: auto">
				<el-form :model="queryParams2" ref="queryForm1" :inline="true" label-width="120px">
					<el-form-item label="被保险人" prop="type">
						<el-select v-model="queryParams2.uid" placeholder="请选择被保险人">
							<el-option v-for="item in insured" :key="item.user_id" :label="item.user_name"
								:value="item.user_id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="实际用工单位" prop="type">
						<el-input v-model="queryParams2.companyg" placeholder="请输入实际用工单位" clearable size="small"
							@keyup.enter.native="getaddUserGroup" />
					</el-form-item>

					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="getaddUserGroup">搜索
						</el-button>
						<el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
					</el-form-item>
				</el-form>
				<el-table v-loading="loading" :data="cgroup" style="width: 100%;">
					<el-table-column prop="create_time" align="center" label="月份" width="180">
						<template slot-scope="scope">
							<span>{{ scope.row.create_time.substring(0, 10) }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="user_name" label="被保险人">
					</el-table-column>
					<el-table-column prop="company" align="center" label="实际用工单位">
					</el-table-column>
					<el-table-column prop="countId" align="center" label="当月新增人数">
						<template slot-scope="scope">
							<span>{{ scope.row.countId ? scope.row.countId + '人' : scope.row.countId }}</span>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="cgroupCount>0" :total="cgroupCount" :page.sync="queryParams2.pageNum"
					:limit.sync="queryParams2.pageSize" @pagination="getaddUserGroup" />
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		totalUserCount1,
		addUserGroup
	} from '@/api/home'
	import {
		seacond_admin
	} from "@/api/insurance/user";

	let echarts = require('echarts/lib/echarts')
	export default {
		name: "index",
		data() {
			return {
				img1: require('../../../assets/images/statistics_bg1.png'),
				img2: require('../../../assets/images/statistics_bg2.png'),
				img3: require('../../../assets/images/statistics_bg3.png'),
				img4: require('../../../assets/images/statistics_bg4.png'),
				img5: require('../../../assets/images/statistics_bg5.png'),

				loading1: false,
				dialogVisible: false, //弹框显示隐藏
				dialogVisible1: false, //当月新增人数弹框显示隐藏
				show: true,
				loading: true,
				//查看总人数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					months: [],
					quarters: [],
					year: "2021",
					user_id: '', //操作人id
					company: null, //实际用工单位
					sys_id: '', //被保险人id

					// companyg:null,//实际用工单位1
					// uid:null,//被保险人id
				},
				total: 0, //总条数

				//选择年份
				options: [{
						value: '1',
						label: '1月'
					},
					{
						value: '2',
						label: '2月'
					},
					{
						value: '3',
						label: '3月'
					},
					{
						value: '4',
						label: '4月'
					},
					{
						value: '5',
						label: '5月'
					},
					{
						value: '6',
						label: '6月'
					},
					{
						value: '7',
						label: '7月'
					},
					{
						value: '8',
						label: '8月'
					},
					{
						value: '9',
						label: '9月'
					},
					{
						value: '10',
						label: '10月'
					},
					{
						value: '11',
						label: '11月'
					},
					{
						value: '12',
						label: '12月'
					}
				],
				//季度
				options1: [{
					value: '1',
					label: '1季度'
				}, {
					value: '2',
					label: '2季度'
				}, {
					value: '3',
					label: '3季度'
				}, {
					value: '4',
					label: '4季度'
				}],
				userCount: '', // 总人数,
				orderUserCount: '', //出单人数
				approveUserCount: '', //批单人数
				userCount4: '', //4类工种总数
				userCount5: 0, //4类以上总数
				quarter4: [], //季度4类工种
				count1: [], //人数
				count: [], //人数
				count4: [], //季度4类人数
				months5: [], //月份4类以上人数
				quarters5: [], //季度4类以上
				approveUserCount4: '',
				approveUserCount13: '',
				approveUserCount5: '',
				orderUserCount4: '',
				orderUserCount13: '',
				orderUserCount5: '',
				companysCount: '', //实际用工单位
				company: [], //查看每家用工单位的总人数
				addUser: '', //当月新增人数
				insured: [], //被保险人

				queryParams1: {
					user_id: '',
					role_id: '',
				},
				cgroup: [], //当月新增根据用工单位查询
				cgroupCount: 0, //新增总条数
				queryParams2: {
					user_id: '', //操作人id
					pageNum: 1,
					pageSize: 10,
					companyg: null, //实际用工单位1
				}
			}
		},
		//钩子函数
		mounted() {
			this.queryParams.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
			var user = JSON.parse(localStorage.getItem('userInfo'));
			this.queryParams1.user_id = user.userId;
			this.queryParams2.user_id = user.userId;
			if (user.roles.length != 0) {
				this.queryParams1.role_id = user.roles[0].roleId
			}
			this.drawChart()
			this.drawChart4();
			seacond_admin(this.queryParams1).then(res => {
				this.insured = res.data;
				// console.log('被保险人数据',res)
			})

		},
		methods: {

			//统计当月新增人数
			getaddUserGroup() {
				this.loading = true;
				addUserGroup(this.queryParams2).then(res => {
					this.loading = false;
					this.cgroup = res.data.cgroup; //当月根据实际用工单位新增人数
					this.cgroupCount = res.data.cgroupCount; //新增总条数
					// console.log('res12',res)
				})
			},
			//点击重置按钮
			resetQuery() {
				this.resetForm("queryForm");
				// console.log('queryParams重置',this.queryParams)
				this.getSearch();
			},
			resetQuery1() {
				this.queryParams2.companyg = null;
				this.queryParams2.uid = null;

				// console.log('queryParams121',this.queryParams2)
				this.getaddUserGroup();
			},
			getSearch() {
				// this.drawChart4();
				if (this.show) {
					this.drawChart();
					this.drawChart4();
				} else {
					this.drawChart1();
					this.drawChart4();
				}
			},
			//当月新增人数
			getemployees() {
				this.dialogVisible1 = true;
				this.getaddUserGroup();
			},
			//查看月份的数据
			getMonth() {
				this.show = true;
				this.drawChart();
				this.resetForm();
				// this.drawChart4();
			},
			//查看季度的数据
			getquarters() {
				// console.log('23')
				// this.drawChart4();
				this.show = false;
				this.drawChart1();
				this.resetForm();
			},
			//重置
			resetForm() {
				this.queryParams = {
					months: [],
					quarters: [],
					year: "2021",
					user_id: this.queryParams.user_id,
					pageNum: 1,
					pageSize: 10,
					company: null,
					sys_id: '',
				}
				if (this.show) {
					this.drawChart();
				} else {
					this.drawChart1();
				}
			},
			//查看实际
			getEmployer() {
				this.dialogVisible = true
			},
			//查看总人数
			getamount1() {

				var obj = {
					month: this.queryParams.months,
					quarters: this.queryParams.quarters,
					year: this.queryParams.year,
					type: '',
					isApproveUser: '',
					sys_id: this.queryParams.sys_id
				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			getIssue() {
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					// query: {
					//   peopleNum: obj
					// }
				})
			},
			//查看出单人数
			getamount2() {
				var obj = {
					month: this.queryParams.months,
					quarters: this.queryParams.quarters,
					year: this.queryParams.year,
					isApproveUser: '0',
					type: '',
					sys_id: this.queryParams.sys_id

				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//查询批单人数
			getamount3() {
				var obj = {
					month: this.queryParams.months,
					quarters: this.queryParams.quarters,
					year: this.queryParams.year,
					isApproveUser: '1',
					type: '',
					sys_id: this.queryParams.sys_id
				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//查询4类及以上人数
			getamount4() {
				var obj = {
					month: this.queryParams.months,
					quarters: this.queryParams.quarters,
					year: this.queryParams.year,
					type: '2',
					isApproveUser: '',
					sys_id: this.queryParams.sys_id
				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			getamount5() {
				var obj = {
					month: this.queryParams.months,
					quarters: this.queryParams.quarters,
					year: this.queryParams.year,
					type: '3',
					isApproveUser: '',
					sys_id: this.queryParams.sys_id
				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//调用统计总人数月份数据
			drawChart() {
				// console.log('queryParams', this.queryParams)
				this.loading1 = true;
				totalUserCount1(this.queryParams).then(res => {
					this.loading1 = false;
					// console.log('统计总人数', res);
					this.count = [];
					//4类工种数据
					this.count4 = [];
					this.months5 = [];
					//获取总人数
					this.userCount = res.data.userCount;
					this.userCount4 = res.data.userCount4;
					this.userCount5 = res.data.userCount5;
					//查看出单人数
					this.orderUserCount = res.data.orderUserCount;
					//查看批单人数
					this.approveUserCount = res.data.approveUserCount;
					this.companysCount = res.data.companysCount; //实际用工单位
					this.company = res.data.company; //每家工作单位
					this.addUser = res.data.addUser; //当月新增人数
					this.total = res.data.companysCount;

					//查询月份的数据

					for (var i = 0; i < res.data.months.length; i++) {
						var key = res.data.months[i];
						this.count[key.month - 1] = key.count
					}
					for (var i = 0; i < res.data.months4.length; i++) {
						var key = res.data.months4[i];
						this.count4[key.month - 1] = key.count
					}
					for (var i = 0; i < res.data.months5.length; i++) {
						var key = res.data.months5[i];
						this.months5[key.month - 1] = key.count
					}

					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.main);

					// 展示月份的统计表
					let option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ( 人 )'
						},
						legend: {
							data: ["总人数", "4类工种人数", "4类以上工种人数"]
						},
						xAxis: {
							name: '月份',
							type: 'category',
							data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月',
								'11 月', '12 月'
							]
						},
						emptyshow: {
							type: Boolean,
							default: true,
						},
						grid: {
							left: '10%',
							right: '10%',
							bottom: '3%',
							// top:'10%',
							containLabel: true
						},

						yAxis: [{
							name: '单位:万人',
							type: 'value',
						}],
						series: [{
								name: "总人数",
								type: "bar",
								// smooth:true,
								data: this.count,
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign: 'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 6,
								//   formatter: '{c} 人',
								//   fontSize: 12,
								//   color: '#F11B82'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#052EFF'
										},
										{
											offset: 0,
											color: '#58D6FF'
										},
									])

								}

								// emphasis: {
								//   focus: 'series'
								// },
							},
							{
								name: "4类工种人数",
								type: "bar",
								data: this.count4,
								// color: ['#45DFE4'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign: 'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 6,
								//   formatter: '{c} 人',
								//   fontSize: 12,
								//   color: '#EF9D29'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#7800FF'
										},
										{
											offset: 0,
											color: '#5897FF'
										},
									])

								}

							},

							{
								name: "4类以上工种人数",
								type: "bar",
								data: this.months5,
								// color: ['#9e7cea'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign: 'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 6,
								//   formatter: '{c} 人',
								//   fontSize: 12,
								//   color: '#7eed3b'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#05AC29'
										},
										{
											offset: 0,
											color: '#58FFC6'
										},
									])

								}
							},

						]
					};
					//  // 展示月份的统计表
					const self = this;
					myChart.setOption(option);
					// setTimeout(() => {
					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// window.onresize = function() {
					//   self.chart = echarts.init(self.$refs.main);
					//   self.chart.resize();
					// }
					// },20)

					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						const pointInPixel = [params.offsetX, params.offsetY];
						var month = []
						month.push(params.name.split(' ')[0])
						if (params.seriesName == "4类工种人数") {
							var obj = {
								month: month,
								quarters: [],
								year: this.queryParams.year,
								type: '2',
								isApproveUser: '',
								sys_id: this.queryParams.sys_id
							}
						}
						if (params.seriesName == "4类以上工种人数") {
							var obj = {
								month: month,
								quarters: [],
								year: this.queryParams.year,
								type: '3',
								isApproveUser: '',
								sys_id: this.queryParams.sys_id
							}
						}
						if (params.seriesName == "总人数") {
							var obj = {
								month: month,
								quarters: [],
								year: this.queryParams.year,
								type: '',
								isApproveUser: '',
								sys_id: this.queryParams.sys_id
							}
						}
						this.$router.push({
							path: '/insurancemanagement/user1',
							// path: '/business/user/index',
							query: {
								peopleNum: obj
							}
						})
						// console.log('params', params)
						// console.log('month', month)
					})
				})
			},
			//调用统计总人数季度数据
			drawChart1() {
				// console.log('queryParams', this.queryParams)
				this.loading1 = true;
				totalUserCount1(this.queryParams).then(res => {
					this.loading1 = false;
					// console.log('统计总人数', res);
					this.quarter4 = [];
					this.count1 = [];
					this.quarters5 = [];
					this.userCount = res.data.userCount;
					this.userCount4 = res.data.userCount4;
					this.userCount5 = res.data.userCount5;
					//查看出单人数
					this.orderUserCount = res.data.orderUserCount;
					//查看批单人数
					this.approveUserCount = res.data.approveUserCount;
					this.companysCount = res.data.companysCount; //实际用工单位
					this.company = res.data.company; //每家工作单位
					this.addUser = res.data.addUser; //当月新增人数

					for (var i = 0; i < res.data.quarters.length; i++) {
						var key = res.data.quarters[i];
						this.count1[key.quarter - 1] = key.count
					}
					for (var i = 0; i < res.data.quarters4.length; i++) {
						var key = res.data.quarters4[i];
						this.quarter4[key.quarters - 1] = key.count
					}
					for (var i = 0; i < res.data.quarters5.length; i++) {
						var key = res.data.quarters5[i];
						this.quarters5[key.quarters - 1] = key.count
					}

					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.main1);

					// 展示月份的统计表
					let option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ( 人 )'
						},
						legend: {
							data: ["总人数", "4类工种人数", "4类以上工种人数"]
						},

						xAxis: {
							name: '季度',
							type: 'category',
							data: ['1 季度', '2 季度', '3 季度', '4 季度']
						},
						yAxis: {
							name: '人数 ( 人 )',
							type: 'value',
						},
						series: [{
								name: "总人数",
								type: "bar",
								data: this.count1,
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign: 'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 15,
								//   formatter: '{c} 人',
								//   fontSize: 12,
								//   color: '#F11B82'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#052EFF'
										},
										{
											offset: 0,
											color: '#58D6FF'
										},
									])

								}
							},
							{
								name: "4类工种人数",
								type: "bar",
								data: this.quarter4,
								// color: ['#45DFE4'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign: 'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 15,
								//   formatter: '{c} 人',
								//   fontSize: 12,
								//   color: '#EF9D29'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#7800FF'
										},
										{
											offset: 0,
											color: '#5897FF'
										},
									])

								}
							},
							{
								name: "4类以上工种人数",
								type: "bar",
								data: this.quarters5,
								// color: ['#9e7cea'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign: 'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 15,
								//   formatter: '{c} 人',
								//   fontSize: 12,
								//   color: '#7eed3b'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#05AC29'
										},
										{
											offset: 0,
											color: '#58FFC6'
										},
									])

								}
							},

						]
					};
					// 展示月份的统计表
					myChart.setOption(option);
					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// const self = this;
					// setTimeout(() => {
					//   window.onresize = function() {
					//     self.chart = echarts.init(self.$refs.main1);
					//     self.chart.resize();
					//   }
					// },20)
					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						const pointInPixel = [params.offsetX, params.offsetY];
						var quarter = []
						quarter.push(params.name.split(' ')[0])
						// console.log('params', params)

						if (params.seriesName == "4类工种人数") {
							var obj = {
								month: [],
								quarters: quarter,
								year: this.queryParams.year,
								type: '2',
								isApproveUser: '',
								sys_id: this.queryParams.sys_id
							}
						}
						if (params.seriesName == "4类以上工种人数") {
							var obj = {
								month: [],
								quarters: quarter,
								year: this.queryParams.year,
								type: '3',
								isApproveUser: '',
								sys_id: this.queryParams.sys_id
							}
						}
						if (params.seriesName == "总人数") {
							var obj = {
								month: [],
								quarters: quarter,
								year: this.queryParams.year,
								type: '',
								isApproveUser: '',
								sys_id: this.queryParams.sys_id
							}
						}
						//跳转到参保人员页面
						this.$router.push({
							path: '/insurancemanagement/user1',
							// path: '/business/user/index',
							query: {
								peopleNum: obj
							}
						})

					})
				})

			},
			//出险率
			drawChart4() {
				this.loading1 = true;
				totalUserCount1(this.queryParams).then(res => {
					this.loading1 = false;
					// console.log('统计总人数', res);
					this.userCount = res.data.userCount;
					this.userCount4 = res.data.userCount4;
					this.userCount5 = res.data.userCount5;
					//查看出单人数
					this.orderUserCount = res.data.orderUserCount;
					this.orderUserCount4 = res.data.orderUserCount4;
					this.orderUserCount13 = res.data.orderUserCount13;
					this.orderUserCount5 = res.data.orderUserCount5;
					//查看批单人数
					this.approveUserCount = res.data.approveUserCount;
					this.approveUserCount4 = res.data.approveUserCount4;
					this.approveUserCount13 = res.data.approveUserCount13;
					this.approveUserCount5 = res.data.approveUserCount5;
					this.companysCount = res.data.companysCount; //实际用工单位
					this.company = res.data.company; //每家工作单位
					this.addUser = res.data.addUser; //当月新增人数

					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.main2);
					// 展示月份的统计表
					let option = {
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c}({d}%)'
						},
						legend: {
							data: ["出单1-3类人数", "出单4类人数", "出单4类以上人数", "批单1-3类人数", "批单4类人数", "批单4类以上人数"],
							// left: 'center',
							right: 10,
							top: 10,
							orient: 'vertical'
						},
						title: {
							left: 'center'
						},
						series: [{
								name: '标题',
								type: 'pie',
								// radius: '65%',
								radius: ['40%', '70%'],
								// center: ['50%', '50%'],
								// selectedMode: 'single',
								avoidLabelOverlap: false,
								itemStyle: {
									borderRadius: 10,
									borderColor: '#fff',
									borderWidth: 5,
									// //这里是更改颜色
									normal: {
										color: function(params) {
											var colorList = [
												'#57d1ff', '#857aff', '#ffca32', '#ff6161',
												'#55ecee', '#53f353'
											];
											return colorList[params.dataIndex]
										},
									},
								},
								label: {
									// show: true,
									normal: {
										position: 'inner',
										show: false
									}
									// formatter: '{b}: {@2012} ({d}%)'
								},
								emphasis: {
									label: {
										show: true,
										// fontSize: '40',
										// fontWeight: 'bold'
									}
								},
								labelLine: {
									show: false
								},

								data: [{
										value: this.orderUserCount13,
										name: '出单1-3类人数'
									},
									{
										value: this.orderUserCount4,
										name: '出单4类人数'
									},
									{
										value: this.orderUserCount5,
										name: '出单4类以上人数'
									},
									{
										value: this.approveUserCount13,
										name: '批单1-3类人数'
									},
									{
										value: this.approveUserCount4,
										name: '批单4类人数'
									},
									{
										value: this.approveUserCount5,
										name: '批单4类以上人数'
									},
								]
							},

						]
					};
					// 展示月份的统计表
					myChart.setOption(option);
					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// const self = this;
					// setTimeout(() => {
					//   window.onresize = function() {
					//     self.chart = echarts.init(self.$refs.main2);
					//     self.chart.resize();
					//   }
					// },20)
					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						// console.log('params', params)
						const pointInPixel = [params.offsetX, params.offsetY];
						// var quarter = []
						// quarter.push(params.name.split(' ')[0])

						if (params.name == '出单1-3类人数') {
							var obj = {
								month: this.queryParams.months,
								quarters: this.queryParams.quarters,
								year: this.queryParams.year,
								type: '1',
								isApproveUser: '0',
								sys_id: this.queryParams.sys_id
							}
						} else if (params.name == '出单4类人数') {
							var obj = {
								month: this.queryParams.months,
								quarters: this.queryParams.quarters,
								year: this.queryParams.year,
								type: '2',
								isApproveUser: '0',
								sys_id: this.queryParams.sys_id
							}
						} else if (params.name == '出单4类以上人数') {
							var obj = {
								month: this.queryParams.months,
								quarters: this.queryParams.quarters,
								year: this.queryParams.year,
								type: '3',
								isApproveUser: '0',
								sys_id: this.queryParams.sys_id
							}
						} else if (params.name == '批单1-3类人数') {
							var obj = {
								month: this.queryParams.months,
								quarters: this.queryParams.quarters,
								year: this.queryParams.year,
								type: '1',
								isApproveUser: '1',
								sys_id: this.queryParams.sys_id
							}
						} else if (params.name == '批单4类人数') {
							var obj = {
								month: this.queryParams.months,
								quarters: this.queryParams.quarters,
								year: this.queryParams.year,
								type: '2',
								isApproveUser: '1',
								sys_id: this.queryParams.sys_id
							}
						} else if (params.name == '批单4类以上人数') {
							var obj = {
								month: this.queryParams.months,
								quarters: this.queryParams.quarters,
								year: this.queryParams.year,
								type: '3',
								isApproveUser: '1',
								sys_id: this.queryParams.sys_id
							}
						}
						// console.log('obj', obj)
						this.$router.push({
							path: '/insurancemanagement/user1',
							// path: '/business/user/index',
							query: {
								peopleNum: obj
							}
						})
						// console.log('obj', obj)
						// console.log('params', params)
					})
				})

			},
		},
		created() {

		}
	}
</script>

<style scoped lang="scss">
	.employ_conter {
		background-color: #E9EEF5;
		width: 100%;
		//height: 800px;
		overflow: auto;
		box-sizing: border-box;
		padding: 40px;

		.el-form {
			margin: 10px 0;
			display: flex;
			align-items: center;

			//background-color: deeppink;
			.el-form-item {
				margin-bottom: 0;

				.el-select {
					width: 200px;
				}
			}

			.btn {
				margin-left: 10px;
				display: flex;
				align-items: center;
				//background-color: pink
			}
		}

		.Statistics_item1 {
			//background-color: pink;
			box-sizing: border-box;
			//margin: 10px;
			padding: 10px;
			//max-width: 100%;
			//min-width:25%;
			width: 100%;

			.Statistics_item2 {
				overflow: hidden;
				//background-color: palegoldenrod;
				width: 100%;

				.Statistics_item2_top {
					background: #FFFFFF;
					border-radius: 20px;
					padding: 20px;

					//padding: 0 10px;

					.peopleNumber {
						width: 100%;
						//background-color: pink;
						display: flex;
						justify-content: flex-start;
						flex-flow: wrap;

						.peopleNumber2 {
							width: 17%;
							height: 120px;
							margin-right: 20px;
							margin-bottom: 20px;
							display: flex;
							background: url("../../../assets/images/statistics_bg.png") no-repeat;
							background-size: 100% 100%;
							flex-direction: column;
							box-sizing: border-box;
							padding: 20px;

							.title {
								font-size: 19px;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #FFFFFF;
							}

							.price {
								margin-top: 5px;

								span {
									font-size: 44px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: #FFFFFF;
								}

								.name {
									font-size: 16px;
								}
							}
						}
					}

					.peopleNumber1 {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						flex-flow: wrap;

						.peopleNumber2 {
							width: 17%;
							height: 120px;
							margin-right: 40px;
							margin-bottom: 20px;
							border: 1px solid #cccccc;
							border-radius: 6px;
							display: flex;
							//align-items: center;
							flex-direction: column;
							justify-content: space-between;
							//background-color: pink;
							//height: 60px;

							.title {
								//background-color:palegoldenrod;
								font-size: 23px;
								text-align: center;
								height: 30px;
								line-height: 30px;
								margin-bottom: 0;
							}

							.price {
								background-color: palegreen;
								display: flex;
								justify-content: space-between;
								padding: 0 5px;
								border-radius: 0 0 6px 6px;
								height: 30px;
								line-height: 30px;

								span {
									font-size: 18px;
									font-weight: bold;
									color: #FFFFFF;
								}
							}
						}
					}


				}

				.Statistics_item2_conter {
					//background-color: plum;

					.title {
						height: 26px;
						font-size: 26px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #333333;
						margin: 20px 0;
					}

					.Statistics_item2_conter_item {
						display: flex;
						justify-content: space-between;
					}
				}
			}

			.Statistics_item3 {
				width: 100%;
				//margin: 0 auto;
				//background-color: paleturquoise;
			}

		}
	}

	.conter {
		justify-content: flex-start;

		.rateConter {
			display: flex;

			//background-color: paleturquoise;

		}
	}

	@media (max-width:1700px) {
		.peopleNumber {
			width: 100%;
			//background-color: pink;
			display: flex;
			justify-content: flex-start;
			flex-flow: wrap;
	
			.peopleNumber2 {
				width: 310px !important;
				// height: 120px;
				margin-right: 20px;
				margin-bottom: 20px;
				display: flex;
				background: url("../../../assets/images/statistics_bg9.png") no-repeat;
				background-size: 100% 100%;
				flex-direction: column;
				box-sizing: border-box;
				padding: 20px;
			}
		}
	}
	
	
	@media (max-width: 1600px) {
		.peopleNumber {
			width: 100%;
	
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 120px !important;
	
				.title {
					font-size: 24px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
	
				.price {
					margin-top: 5px;
	
					span {
						font-size: 30px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
	
					.name {
						font-size: 22px;
					}
				}
			}
		}
	}
	
	@media (max-width: 1500px) {
		.peopleNumber {
			width: 100%;
	
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 110px !important;
	
				.title {
					font-size: 22px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
	
				.price {
					margin-top: 5px;
	
					span {
						font-size: 28px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
	
					.name {
						font-size: 21px;
					}
				}
			}
		}
	}
	
	@media (max-width: 1400px) {
		.peopleNumber {
			width: 100%;
	
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 95px !important;
	
				.title {
					font-size: 19px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
	
				.price {
					margin-top: 5px;
	
					span {
						font-size: 24px !important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
	
					.name {
						font-size: 19px !important;
					}
				}
			}
		}
	}
	
	@media (max-width: 1300px) {
		.peopleNumber {
			width: 100%;
	
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 85px !important;
	
				.title {
					font-size: 17px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
	
				.price {
					margin-top: 5px;
	
					span {
						font-size: 22px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
	
					.name {
						font-size: 18px;
					}
				}
			}
		}
	}
	
	@media (max-width: 1200px) {
		.peopleNumber {
			width: 100%;
	
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 17% !important;
				height: 75px !important;
	
				.title {
					font-size: 14px !important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
	
				.price {
					margin-top: 5px;
	
					span {
						font-size: 22px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
	
					.name {
						font-size: 16px;
					}
				}
			}
		}
	}
	
	@media (max-width: 1100px) {
		.peopleNumber {
			width: 100%;
	
			.peopleNumber2 {
				padding: 10px !important;
				width: 17% !important;
				height: 70px !important;
				box-sizing: border-box;
	
				.title {
					font-size: 10px !important;
				}
	
				.price {
					span {
						font-size: 18px !important;
					}
	
					.name {
						font-size: 14px;
					}
				}
			}
		}
	}
</style>
